<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="title"></c-nav-bar>
		<view class="user" v-if="searchList">
			<view class="user-img">
				<image :src="searchList.headUrl" mode="aspectFill">
				</image>
			</view>
			<view class="user-right">
				<view class="user-name">
					{{searchList.realName}}
				</view>
				<view class="user-time">
					{{searchList.createDate}}发布
				</view>
			</view>
		</view>


		<view class="text-text" v-if="searchList">
			<view class="text-one">
				{{searchList.title}}
			</view>

			<view class="text-two" v-for="item,index in substrings ">
				<!-- {{item |removeHtmlStyle}} -->
				<u-parse class="text-two" :content='item' :tagStyle="style"></u-parse>
			</view>
		</view>
		<!-- 	<view class="text-three">
			<image class="img" :src="searchList.pic" mode="widthFix" @click="previewImage"></image>
		</view> -->
		<view class="pop-center" v-if="searchList">
			<view class="title">
				共{{commentnum}}条评论
			</view>
			<!-- @click="discuss(item,index)" -->
			<view v-for="(item,index) in searchList.comments" :key="index" class="comments">

				<view class="one-list" @tap="discuss(item,index)" @longpress='TapAndHold(item,index)'>
					<view class="image">
						<image :src="item.headUrl" mode="aspectFill"></image>
					</view>
					<view class="text">
						<view class="center-title">
							{{item.commentatorName}}
						</view>
						<view class="center-text">
							{{item.content}}
						</view>
						<view class="center-time">
							{{item.createDate}}
						</view>
					</view>
				</view>
				<view class="two-list" v-for="ite,ids in item.children" :key="ids" @click="discussChildren(ite,ids)"
					@longpress='TapAndHold(ite,ids)'>
					<view v-if="ite.pid ==0">
					</view>
					<view v-else>
						<view class="image">
							<image :src="ite.headUrl" mode="aspectFill" style="margin-right: 8rpx;"></image>
							<view class="center-title">
								{{ite.commentatorName}}
							</view>
						</view>
						<view class="text">
							<view v-if="item.pid ==ite.commentPid ">
								<view class="center-text">
									{{ite.content}}
								</view>
							</view>
							<view class="center-text" v-else>
								回复 <text
									style="color: #777777; font-size: 24rpx; margin: 0 8rpx;">{{ite.pname}}:</text>{{ite.content}}
							</view>
							<view class="center-time">
								{{ite.createDate}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="bottom-input">
			<view class="icon">
				<!-- 点赞 -->
				<view class="box">
					<!-- <u-icon name="thumb-up" size="50rpx" :cllor="likeShow !==true?'#1bd0f4 ':''"></u-icon> -->
					<u-icon name="thumb-up" v-if="likeType==0" size="50rpx" @click="like"></u-icon>
					<u-icon name="thumb-up-fill" color='#007A69' size="50rpx" v-else @click="like"></u-icon>
					<u-badge :type="type" max="99" :value="likenum"></u-badge>
				</view>
				<!-- 评论 -->
				<view class="box">
					<u-icon name="chat" size="50rpx" :cllor="commentShow !==true?'#1bd0f4':''"></u-icon>
					<u-badge :type="type" max="99" :value="commentnum"></u-badge>
				</view>
				<!-- 收藏 -->
				<view class="box" @click="care">
					<u-icon name="star" size="50rpx" v-if="careType==0"></u-icon>
					<u-icon name="star-fill" color='#007A69' size="50rpx" v-else></u-icon>
					<u-badge :type="type" max="99" :value="carenum"></u-badge>
				</view>
			</view>

			<view class="pop-input" @click="showVal" :class="showValues==false?'pop-input-if':''">
				<view class="ipt">
					<u--input placeholder="说点什么" shape="circle" border="none" v-model="values" @blur="comment"><u--text
							slot="prefix" margin="0 70rpx 0 0" padding='6rpx' type="tips"></u--text></u--input>
				</view>
			</view>

		</view>
		<!-- 评论输入框 -->
		<view v-if="commit">
			<input-box :commit="commit" @submit="submit"></input-box>
		</view>
		<view v-else>

		</view>

		<!-- 评论删除回复弹出框 -->
		<u-popup :show="show" @close="close" :round="24" @open="open">
			<view class="pop">
				<view class="two" style="color: #FF4141;" @click="del">
					删除
				</view>
				<view class="three" @click="show=false">
					取消
				</view>
			</view>
		</u-popup>
		<!-- 授权手机登录 -->
		<GetPhoneNumber ref="phoneNumber" @loginSuccess="loginSuccess"></GetPhoneNumber>
	</view>


</template>

<script>
	import GetPhoneNumber from '@/compoments/Getphonenumber/index.vue'
	import inputBox from '@/compoments/inputBox/inputBox.vue'
	export default {
		components: {
			GetPhoneNumber,
			inputBox,
		},
		data() {
			return {
				radiolist1: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
				],
				publish: false,
				title: '详情',
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				showValues: true,
				likeShow: true,
				careShow: true,
				commit: false,
				type: "warning",
				likenum: 0,
				commentnum: 0,
				carenum: 0,
				values: "",
				currentNum: 0,
				// value: '',
				id: '',
				searchList: '',
				moreList: {},
				list: [],
				picLength: 0,
				commentsLength: 0,
				introdutionId: '',
				dto: {
					commentPid: null,
					commentatorId: 0,
					commentatorName: "",
					content: "",
					count: 0,
					createDate: "",
					creator: 0,
					id: null,
					num: 0,
					pid: null,
					tripId: null,
					updateDate: "",
					updater: null,
					pname: null,
					type: null,
					commId: null,
					revieweeId: null
				},
				show: false,
				publisherId: 0,
				item: {},
				// showModal: false,
				substrings: {},
				likeType: null,
				careType: null,
				style: {
					// 字符串的形式
					p: 'color:#666;font-size:30rpx; line-height: 48rpx; font-weight: Regular;',
					// span: 'font-size: 30rpx'
				}

			};
		},
		onLoad(option) {
			this.id = option.id
			this.getList(option.id)
			this.dto.tripId = option.id
			// this.$login().then(res => {
			// 	if (res !== 0) {
			// 		this.$refs['phoneNumber'].show = true;
			// 	}
			// })
		},

		methods: {
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			open() {
				// console.log('open');
			},
			closes() {
				this.publish = false
				// console.log('close');
			},
			previewImage(e) {
				const current = e.target.dataset.src
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [current],
					// 为当前显示图片的链接/索引值
					current: 'https://i.ringzle.com/file/20231213/31561c3eb79c44e585ddcf6c0da0da22.png',
					// 图片指示器样式
					indicator: 'default',
					// 是否可循环预览
					loop: false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					success: (res) => {},
				})
			},
			// 删除
			del() {
				this.show = false
				this.showModal = true
				this.$api.get(
					`/api/introdution/delComment?commentId=${this.item.id}&publisherId=${this.publisherId}&commentatorId=${this.item.commentatorId}`
				).then(res => {

					if (res.data.code == 0) {
						this.$showToast(res.data.data)
						this.getList(this.id)
					} else this.$showModal(res.data.msg)

				})
			},

			// 长按时间
			TapAndHold(item, index) {
				this.show = true
				this.item = item
			},
			open() {},
			close() {
				this.show = false
			},
			showVal() {
				this.showValues = false
			},
			// 底部一级评论文章
			comment(val) {
				this.showValues = true
				this.dto.pid = 0
				if (val !== '') {
					this.$api.detectionContent(val).then(result => {
						if (result.code !== 0) return this.$showToast(result.msg);
						this.dto.content = val
						this.$api.post('/api/introdution/comment', this.dto)
							.then(res => {
								this.values = ''
								this.getList(this.id)
								this.showValues = true
							})
					})


				}
			},

			// 评论区一级评论
			discuss(e, i) {
				this.commit = true
				this.dto.pid = e.id //二级id
				this.dto.commentPid = e.id
				this.dto.pname = e.commentatorName
				this.showValues = true
			},
			// 评论区二级评论
			discussChildren(e, i) {
				this.commit = true
				this.showValues = true
				this.dto.pid = e.id
				this.dto.revieweeId = e.creator //被评论人 id
				this.dto.commentPid = e.commentPid
				this.dto.pname = e.commentatorName
			},

			// 评论区评论接口调用
			submit(val) {
				this.commit = false
				if (val !== '') {
					this.$api.detectionContent(val).then(result => {
						if (result.code !== 0) return this.$showToast(result.msg);
						this.dto.content = val
						this.commit = false
						this.$api.post('/api/introdution/comment',
							this.dto
						).then(res => {
							this.getList(this.id)
						})
					})
				}
			},


			// 点赞
			like() {

				let list = {
					id: this.introdutionId,
					type: this.dto.type
				}

				this.$api.get('/api/introdution/Like', list).then(res => {
					this.$showToast(res.data.data)
					if (res.data.data == '点赞成功') {
						this.likeShow = false
					} else if (res.data.data == '取消成功') {
						this.likeShow = true
					}
					this.getList(this.id)
				})
			},

			// 收藏
			care() {
				let list = {
					id: this.introdutionId,
					type: this.dto.type
				}

				this.$api.get('/api/introdution/Care', list).then(res => {
					this.$showToast(res.data.data)
					if (res.data.data == '收藏成功') {
						this.careShow = false
					} else if (res.data.data == '取消成功') {
						this.careShow = true
					}
					this.getList(this.id)
				})
			},
			loginSuccess() {
				this.getList(this.id)
			},
			// 获取详情数据
			getList(id) {
				this.$api.get(`/api/newsInformation/getOne?id=${id}`)
					.then(res => {
						this.introdutionId = res.data.data.id
						this.searchList = res.data.data;
						this.searchList.comments.forEach(s => s.list2 = []);
						this.list = res.data.data.pic
						this.likenum = res.data.data.likeNum
						this.commentnum = res.data.data.commentNum
						this.carenum = res.data.data.careNum
						this.publisherId = res.data.data.creator
						this.dto.type = res.data.data.type
						this.dto.commId = res.data.data.id
						this.likeType = res.data.data.likeType
						this.careType = res.data.data.careType
						// 根据逗号(,)分割字符串 
						this.substrings = this.searchList.content.split('\n');
						this.commentsLength = res.data.data.comments.length
					})
			},



		}
	}
</script>
<style lang="less">
	.u-radio__icon-wrap--circle {
		width: 30rpx !important;
		height: 30rpx !important;
	}

	.input-box {
		border-top: 0 !important;
		border-bottom: 0 !important;
	}

	.u-radio__text {
		font-size: 28rpx !important;
	}

	.btn-btn {
		position: relative;
		bottom: 30rpx;
		left: 22rpx;
		width: 702rpx;
		height: 88rpx;
		background-color: #33AFFC;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		text-align: center;

		:nth-child(1) {
			font-size: 32rpx;
			font-weight: Regular;
			color: #FFFFFF;
			text-align: center;
			margin: 0 auto;
		}
	}

	.pops {
		box-sizing: border-box;
		height: 45vh;
		margin: 24rpx;
	}

	.pop-titles {
		text-align: center;
		margin: 48rpx auto;
		font-size: 32rpx;
		color: #111111;

	}

	.uicon-close {
		font-size: 32rpx !important;
		color: #111111 !important;
		top: 26rpx !important;
	}

	.uicon-checkbox-mark {
		font-size: 24rpx !important;
	}

	.from-item {
		// padding: 20rpx;
		height: 102rpx;
		line-height: 102rpx;
		// border: 1rpx solid #007A69;
		border-bottom: 1rpx solid #EFEFEF;
		font-size: 24rpx;
		text-align: center;
		// border-radius: 16rpx;
		display: flex;
		justify-content: space-between;

		:nth-child(1) {
			height: 102rpx;
			line-height: 102rpx;
			font-size: 30rpx;
			color: #666666;
		}

		:nth-child(2) {
			height: 102rpx;
			line-height: 102rpx;
		}

		.left {
			margin: 10rpx 0;
		}

		.right {
			// margin: 10rpx 0;
			margin-top: 10rpx;
		}

		text {
			display: block;
			color: #111;

			&:nth-child(2) {
				margin: 8rpx 0;
			}

			&:nth-child(3) {
				color: #007A69;
			}
		}

		&:last-child {
			// padding-top: 40rpx;

			text {
				color: #007A69;
			}

		}
	}

	.u-ipt {
		border: none;
		outline: none;
		text-align: right;

		&::placeholder {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
		}
	}



	.u-moreList {
		width: 60% !important;
	}

	// .u-circle {
	// 	padding: 6rpx !important;
	// }

	.swiper {
		box-sizing: border-box;
		width: 100vw;
		height: 980rpx !important;
		backdrop-filter: blur(300px);
		background: rgba(251, 251, 251, .1);

	}

	.u-badge {
		padding: 0 !important;
		background-color: #FFFFFF !important;
		margin-left: -14rpx;
		color: #666666 !important;
		margin-top: 5rpx;
	}

	.u-input__content__field-wrapper__field {
		font-size: 24rpx;
		margin-left: 30rpx;
	}

	.indicator {
		// @include flex(row);
		display: flex;
		justify-content: center;

		&__dot {
			height: 6px;
			width: 6px;
			border-radius: 100px;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 5px;
			transition: background-color 0.3s;

			&--active {
				background-color: #ffffff;
			}
		}
	}

	.indicator-num {
		padding: 2px 0;
		background-color: rgba(0, 0, 0, 0.35);
		border-radius: 100px;
		width: 35px;
		// @include flex;
		display: flex;
		justify-content: center;

		&__text {
			color: #FFFFFF;
			font-size: 12px;
		}
	}

	.comments {
		border-bottom: 1rpx solid #EFEFEF;

		.one-list {
			display: flex;

			.image {
				// margin-top: -10rpx;
				margin: 20rpx;
				width: 64rpx;
				height: 64rpx;
				border-radius: 50rpx;

				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50rpx;
				}
			}

			.text {
				.center-title {
					margin-top: 26rpx;
					color: #777777;
					font-size: 24rpx;
				}

				.center-text {
					width: 580rpx;
				}

				.center-time {
					font-size: 24rpx;
					color: #aaa;
					font-weight: Regular;
				}

			}
		}

		.two-list {
			width: 520rpx;
			// display: flex;
			margin: 20rpx 100rpx;

			.image {
				width: 500rpx;
				display: flex;
				height: 35rpx;
				margin: 0 8rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50rpx;
				}

				.center-title {
					// margin-top: 26rpx;

					color: #777777;
					font-size: 24rpx;
				}
			}

			.text {
				margin-left: 38rpx;

				.center-text {
					width: 520rpx;
				}

				.center-time {
					font-size: 24rpx;
					color: #aaa;
					font-weight: Regular;
				}

			}
		}
	}

	.u-modal__content__text {
		text-align: center !important;
	}
</style>

<style lang="scss">
	.page {
		margin: 0;
		padding: 0;
	}



	.user {
		display: flex;
		padding: 31rpx 24rpx;

		.user-img {
			margin-right: 31rpx;
			width: 36px;
			height: 36px;

			image {
				height: 36px;
				width: 36px;
				border-radius: 50%;
			}
		}

		.user-right {
			.user-name {
				font-size: 30rpx;
				color: #111111;
			}

			.user-time {
				font-size: 24rpx;
				color: #999999;
			}
		}


	}

	.text-text {
		padding: 26rpx;
		border-bottom: 1rpx solid #f0f2f5;

		.text-one {
			font-size: 30rpx;
			color: #333;
			font-weight: 600;
			margin-bottom: 12px;
		}

		.text-two {
			font-size: 30rpx;
			color: #666666;
			line-height: 48rpx;
			font-weight: Regular;

		}


	}

	.text-three {
		width: 100%;

		.img {
			width: 100%;
		}
	}


	.pop-center {
		padding: 24rpx 24rpx 190rpx;
	}

	.bottom-input {
		border-top: 1rpx solid #F5F8FA;
		box-sizing: border-box;
		padding: 32rpx;
		position: fixed;
		bottom: 0;
		height: 142rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;

		.icon {
			// margin: 0 32rpx;
			width: 340rpx;
			height: 142rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text-align: center;

			.box {
				// flex: 1;

				display: flex;
				width: 120rpx;

				.u-icon__icon {
					width: 60rpx !important;
					height: 60rpx !important;
				}
			}

		}

	}

	.pop-input {
		margin: 0 auto;
		padding: 0 30rpx;
		background: #f5f8fa;
		width: 330rpx;
		height: 72rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		// position: relative;

		text {
			font-size: 24rpx;
			color: #AAAAAA;
		}

	}

	.pop-input-if {
		// margin: 0 auto;
		// padding: 0 30rpx;
		// background-color: aqua;
		background: #fff !important;
		border-radius: 0 !important;
		box-sizing: border-box;
		width: 100vw;
		height: 150rpx;

		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 30rpx;

		.ipt {
			width: 100%;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 50rpx;
			background: #eeeeee;

			.u-input__content {
				padding: 12rpx !important;
			}
		}

		// .u-input--circle {

		// 	.uni-input-input {
		// 		padding: 50rpx;
		// 		margin-left: 50rpx;
		// 	}
		// }

	}

	.pop {
		// display: flex;
		// height: 408rpx;
		border-radius: 24rpx 24rpx 0 0;
		font-size: 32rpx;
		font-weight: 600;
		color: #111111;
		text-align: center;
		background-color: #FAFAFA;


		.one {
			padding-top: 10rpx;
			border-radius: 24rpx 24rpx 0 0;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
			margin-bottom: 6rpx;
		}


		.two {
			height: 88rpx;
			line-height: 88rpx;
			background-color: #fff;
		}

		.three {
			margin-top: 20rpx;
			height: 140rpx;
			line-height: 100rpx;
			background-color: #fff;
		}
	}
</style>